<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form label-position="right" label-width="50px" :model="search" ref="searchForm">
        <el-row>
          <el-col :span="4">
            <el-form-item label="姓名:" prop="createdUserName">
              <el-input v-model="search.createdUserName" name="createdUserName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-form-item label="部门:" prop="searchDeptId">
              <el-cascader
                v-model="searchDeptId"
                clearable
                filterable
                placeholder="请选择部门"
                :options="controlData.deptTree"
                :show-all-levels="false"
                :props="{ value: 'id', label: 'text', checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-form-item label="类型:" prop="leaveType">
              <el-select v-model="search.leaveType">
                <el-option
                  v-for="item in controlData.leaveTypes"
                  :key="item.name"
                  :value="item.code"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9" :offset="1">
            <el-form-item label="时间:" prop="pickervalue">
              <el-date-picker
                v-model="pickervalue"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button type="primary" @click="searchQuery">查询</el-button>
            <el-button type="info" @click="reset">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <qm-table
      :data="query"
      keyProp="applyId"
      :showToolbar="false"
      :showOrder="false"
      :showMenu="false"
      :showRadio="false"
      :options="{
          showFooter:true,
          footerMethod:footerMethod,
          spanMethod:rowspanMethod,
      }"
    >
      <qm-table-column field="createdUserName" width="100">姓名</qm-table-column>
      <qm-table-column field="createdDeptName" width="150">部门</qm-table-column>
      <qm-table-column field="typeName" width="100">请假类型</qm-table-column>
      <qm-table-column field="startDate" width="160">开始时间</qm-table-column>
      <qm-table-column field="endDate" width="160">结束时间</qm-table-column>
      <qm-table-column field="leaveDay" width="120">请假时长(小时)</qm-table-column>
      <qm-table-column :show-overflow="true" field="reason">事由</qm-table-column>
    </qm-table>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      query: [{ url: "/eip/leaveApply2/query", method: "post" }],
      save: "/eip/leaveApply2/save",
      delete: "/eip/leaveApply2/delete",
      entity: "/eip/leaveApply2/getEntity",
      model: "/eip/leaveApply2/getListModel",
    };
  }

  mixin() {
    return {
      data() {
        return {
          pickerOptions: {
            shortcuts: [
              {
                text: "今天",
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  picker.$emit("pick", [start, end]);
                },
              },
              {
                text: "最近一周",
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit("pick", [start, end]);
                },
              },
              {
                text: "最近一个月",
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit("pick", [start, end]);
                },
              },
              {
                text: "最近三个月",
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit("pick", [start, end]);
                },
              },
              {
                text: "最近半年",
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                  picker.$emit("pick", [start, end]);
                },
              },
              {
                text: "最近一年",
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
                  picker.$emit("pick", [start, end]);
                },
              },
            ],
          },
          pickervalue: [],
          searchDeptId: "",
        };
      },
      watch: {
        searchDeptId(v) {
          if (v && v.length === 1) {
            this.search.createdDeptId = v[0];
          }
        },
        pickervalue(v) {
          if (v && v.length === 2) {
            this.search.startDate = v[0];
            this.search.endDate = v[1];
          } else {
            delete this.search.startDate;
            delete this.search.endDate;
          }
        },
      },
      methods: {
        rowspanMethod({ row, _rowIndex, column, visibleData }) {
          let fields = ["createdUserName", "createdDeptName"];
          let cellValue = row[column.property];
          if (cellValue && fields.includes(column.property)) {
            let prevRow = visibleData[_rowIndex - 1];
            let nextRow = visibleData[_rowIndex + 1];
            if (prevRow && prevRow[column.property] === cellValue) {
              return { rowspan: 0, colspan: 0 };
            } else {
              let countRowspan = 1;
              while (nextRow && nextRow[column.property] === cellValue) {
                nextRow = visibleData[++countRowspan + _rowIndex];
              }
              if (countRowspan > 1) {
                return { rowspan: countRowspan, colspan: 1 };
              }
            }
          }
        },
        //重置
        reset() {
          this.search = {};
          this.pickervalue = [];
          this.searchDeptId = "";
          this.searchQuery();
        },
        sumNum(list, field) {
          let count = 0;
          list.forEach((item) => {
            count += Number(item[field]);
          });
          return count;
        },
        footerMethod({ columns, data }) {
          return [
            columns.map((column, columnIndex) => {
              if (columnIndex === 0) {
                return `合计`;
              }
              if (["leaveDay"].includes(column.property)) {
                return this.sumNum(data, "leaveDay");
              }
              return null;
            }),
          ];
        },
      },
    };
  }
}
</script>

<style scoped lang="scss">
</style>

